/*myData:[{title:'Đĩa', url: 'abc'}],*/
(function($){
    var AdminArticleEdit = function(element, options)
    {
        var elem = $(element);
        var obj = this;
        var settings = $.extend({
            myData    : null
        }, options || {});



        var rdmStr = $.randomString();
        var txtTitle;
        var txtUrl;

        containerHtml = '<div class="ctn_add_article">'+
            '<div class="ctn_add_ctrl">'+
            '<a id="lnkAddArticle" href="javascript:void(0);">'+
            '<span class="edit-add" style="color: #0077B5"><i class="fa fa-plus"></i> Thêm bài viết</span>'+
            '</a>'+
            '</div>'+
            '<div class="ctn_add_content_ctrl" style="display: none">'+
            '<div>'+
            '<input id="txtAddTitle"  class="k-textbox" name="txtAddTitle" '+
            'placeholder="Nhập tiêu đề, bắt buộc"  required validationMessage="Chưa nhập tiêu đề" />'+
            '<span class="k-invalid-msg" data-for="txtAddTitle"></span>&nbsp;'+
            '<input id="txtAddUrl"   class="k-textbox" name="txtAddUrl" '+
            'placeholder="Nhập url, bắt buộc"  required validationMessage="Chưa nhập url" />'+
            '<span class="k-invalid-msg" data-for="txtAddUrl"></span>'+
            

            '</div>'+
            '<div  class="btn_group" >'+
            '<a id="lnkSaveAddArticle" href="javascript:void(0)">'+
            '<span class="edit-add" style="color: #0077B5"><i class="fa fa-check"></i> Lưu</span>'+
            '</a>'+

            '<a id="lnkCancelAddArticle" href="javascript:void(0);">'+
            '<span class="edit-add" style="color: #0077B5"><i class="fa fa-ban"></i> Hủy</span>'+
            '</a>'+
            '</div>'+
            '</div>'+

            '<div class="ctn_edit_ctrl">'+

            '</div></div>';
        $(elem).html(containerHtml);

    


        $('#lnkAddArticle').click(function(){
            $('#txtAddTitle').val('');
            $('#txtAddUrl').val('');
            $('#txtAddTitle').focus();
            $('.ctn_add_article .ctn_add_ctrl').hide();
            $('.ctn_add_article .ctn_add_content_ctrl').show();
        });

        $('#lnkCancelAddArticle').click(function(){
            $('.ctn_add_article .ctn_add_ctrl').show();
            $('.ctn_add_article .ctn_add_content_ctrl').hide();
        });


        $('#lnkSaveAddArticle').click(function(){
            title = $('#txtAddTitle').val();
            url = $('#txtAddUrl').val();
            aRdmStr =  $.randomString();
            html = '<div class="article_item">'+
                '<div class="article_item_view">'+
                '<span class="title">'+title+'</span>&nbsp;'+
                '<span class="url">'+url+'</span>&nbsp;'+
                
                '<a id="lnkEditArticle_'+aRdmStr+'" href="javascript:void(0)"><span>Sửa</span></a>&nbsp;'+
                '<a id="lnkRemoveArticle_'+aRdmStr+'" href="javascript:void(0)"><span>Xóa</span></a>'+
                '</div>'+
                '<div class="article_item_edit" style="display: none">'+
                '<div>'+
                '<input id="txtEditTitle_'+aRdmStr+'" class="k-textbox" style="width:25%"  name="txtEditTitle_'+aRdmStr+'"  value="'+title+'" '+
                'placeholder="Nhâp tiêu đề, bắt buộc"  required validationMessage="Chưa nhập tiêu đề" />'+
                '<span class="k-invalid-msg" data-for="txtEditTitle_'+aRdmStr+'"></span>&nbsp;'+
                '<input id="txtEditUrl_'+aRdmStr+'" type="url" class="k-textbox" style="width:70%" name="txtEditUrl_'+aRdmStr+'"  value="'+url+'" '+
                'placeholder="Nhâp url, bắt buộc"  required validationMessage="Chưa nhập url" data-url-msg="Sai định dạng url"/>'+
                '<span class="k-invalid-msg" data-for="txtEditUrl_'+aRdmStr+'"></span>'+
                '</div>'+
                '<div class="btn_group">'+
                '<a id="lnkSaveEditArticle_'+aRdmStr+'" href="javascript:void(0)">'+
                '<span class="edit-add" style="color: #0077B5"><i class="fa fa-check"></i> Lưu</span>'+
                '</a>'+

                '<a id="lnkCancelEditArticle_'+aRdmStr+'" href="javascript:void(0);">'+
                '<span class="edit-add" style="color: #0077B5"><i class="fa fa-ban"></i> Hủy</span>'+
                '</a>'+
                '</div>'+
                '</div>'+
                '</div>';
            $('.ctn_add_article .ctn_edit_ctrl').append(html);

            

            
            $('#lnkEditArticle_' + aRdmStr).on('click',function(){

                myParent = $(this).closest('.article_item_view');
                title = myParent.find('span.title').html();
                url = myParent.find('span.url').html();
                
                rdm = $(this).attr('id').substr('lnkEditArticle_'.length)

                $("#txtEditTitle_"+ rdm).val(title);
                $("#txtEditUrl_"+ rdm).val(url);

                myEdit = myParent.siblings('.article_item_edit');
                myParent.hide();
                myEdit.show();
            });

            $('#lnkRemoveArticle_' + aRdmStr).on('click',function(){
                myParent = $(this).closest('.article_item');
                myParent.remove();

            });

            $('#lnkSaveEditArticle_' + aRdmStr).on('click',function(){
                myParent = $(this).closest('.article_item_edit');
                rdm = $(this).attr('id').substr('lnkSaveEditArticle_'.length)
                myView = myParent.siblings('.article_item_view');

                myView.find('span.title').html($("#txtEditTitle_"+ rdm).val());
                myView.find('span.url').html($("#txtEditUrl_"+ rdm).val());
                
                myView.show();
                myParent.hide();
            })


            $('#lnkCancelEditArticle_' + aRdmStr).on('click',function(){
                rdm = $(this).attr('id').substr('lnkCancelEditArticle_'.length)
                myParent = $(this).closest('.article_item_edit');
                myView = myParent.siblings('.article_item_view');

                title = myView.find('span.title').html();
                url = myView.find('span.url').html();

                $("#txtEditTitle_"+ rdm).val(title);
                $("#txtEditUrl_"+ rdm).val(url);

                myParent.hide();
                myView.show();
            })

            $('.ctn_add_article .ctn_add_ctrl').show();
            $('.ctn_add_article .ctn_add_content_ctrl').hide();
            $(".ctn_add_article").kendoValidator();
        });
        if(settings.myData){
            for(var i = 0; i < settings.myData.length; i++) {
                anArticleObj = settings.myData[i];
                aRdmStr =  $.randomString();
                html = '<div class="article_item">'+
                    '<div class="article_item_view">'+
                    '<span class="title">'+anArticleObj.title+'</span>&nbsp;'+
                    '<span class="url">'+anArticleObj.url+'</span>&nbsp;'+

                    '<a id="lnkEditArticle_'+aRdmStr+'" href="javascript:void(0)"><span>Sửa</span></a>&nbsp;'+
                    '<a id="lnkRemoveArticle_'+aRdmStr+'" href="javascript:void(0)"><span>Xóa</span></a>'+
                    '</div>'+
                    '<div class="article_item_edit" style="display: none">'+
                    '<div>'+
                    '<input id="txtEditTitle_'+aRdmStr+'" class="k-textbox" style="width:25%" name="txtEditTitle_'+aRdmStr+'" value="'+anArticleObj.title+'" '+
                    'placeholder="Nhâp tiêu đề, bắt buộc"  required validationMessage="Chưa nhập tiêu đề" />'+
                    '<span class="k-invalid-msg" data-for="txtEditTitle_'+aRdmStr+'"></span>&nbsp;'+
                    '<input id="txtEditUrl_'+aRdmStr+'" class="k-textbox" style="width:70%" name="txtEditUrl_'+aRdmStr+'" value="'+anArticleObj.url+'" '+
                    'placeholder="Nhâp url, bắt buộc"  required validationMessage="Chưa nhập url" />'+
                    '<span class="k-invalid-msg" data-for="txtEditUrl_'+aRdmStr+'"></span>'+

                    '</div>'+
                    '<div class="btn_group">'+
                    '<a id="lnkSaveEditArticle_'+aRdmStr+'" href="javascript:void(0)">'+
                    '<span class="edit-add" style="color: #0077B5"><i class="fa fa-check"></i> Lưu</span>'+
                    '</a>'+

                    '<a id="lnkCancelEditArticle_'+aRdmStr+'" href="javascript:void(0);">'+
                    '<span class="edit-add" style="color: #0077B5"><i class="fa fa-ban"></i> Hủy</span>'+
                    '</a>'+
                    '</div>'+
                    '</div>'+
                    '</div>';
                $('.ctn_add_article .ctn_edit_ctrl').append(html);




                $('#lnkEditArticle_' + aRdmStr).on('click',function(){
                    myParent = $(this).closest('.article_item_view');
                    title = myParent.find('span.title').html();
                    url = myParent.find('span.url').html();

                    rdm = $(this).attr('id').substr('lnkEditArticle_'.length)

                    $("#txtEditTitle_"+ rdm).val(title);
                    $("#txtEditUrl_"+ rdm).val(url);

                    myEdit = myParent.siblings('.article_item_edit');
                    myParent.hide();
                    myEdit.show();
                });

                $('#lnkRemoveArticle_' + aRdmStr).on('click',function(){
                    myParent = $(this).closest('.article_item');
                    myParent.remove();

                });

                $('#lnkSaveEditArticle_' + aRdmStr).on('click',function(){
                    myParent = $(this).closest('.article_item_edit');
                    rdm = $(this).attr('id').substr('lnkSaveEditArticle_'.length)
                    myView = myParent.siblings('.article_item_view');

                    myView.find('span.title').html($("#txtEditTitle_"+ rdm).val());
                    myView.find('span.url').html($("#txtEditUrl_"+ rdm).val());

                    myView.show();
                    myParent.hide();
                })


                $('#lnkCancelEditArticle_' + aRdmStr).on('click',function(){
                    rdm = $(this).attr('id').substr('lnkCancelEditArticle_'.length)
                    myParent = $(this).closest('.article_item_edit');
                    myView = myParent.siblings('.article_item_view');

                    title = myView.find('span.title').html();
                    url = myView.find('span.url').html();

                    $("#txtEditTitle_"+ rdm).val(title);
                    $("#txtEditUrl_"+ rdm).val(url);

                    myParent.hide();
                    myView.show();
                })


            }


            $(".ctn_add_article").kendoValidator();
        }

        // Public method - can be called from client code
        this.getArticle = function()
        {
            resultArr = [];

            elem.find('.article_item_view ').each(function(){
                title = $(this).find('span.title').html();
                url = $(this).find('span.url').html();

                tmpJson = {};
                tmpJson['title'] =  title;
                tmpJson['url'] =  url;
                resultArr.push(tmpJson);

            })

            return resultArr;

        };

        // Private method - can only be called from within this object
        var privateMethod = function()
        {
            console.log('private method called!');
        };
    };

    $.fn.adminArticleEdit = function(options)
    {
        return this.each(function()
        {
            var element = $(this);

            // Return early if this element already has a plugin instance
            if (element.data('adminArticleEdit')) return;

            // pass options to plugin constructor
            var adminArticleEdit = new AdminArticleEdit(this, options);

            // Store plugin object in this element's data
            element.data('adminArticleEdit', adminArticleEdit);



        });
    };
})(jQuery);
